<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <style>
        body {
            margin:0;
            padding:0;
            font-family:sans-serif;
            background:#2C2255;
            background:url(../image/水漫漫.jpg);
            background-repeat: no-repeat;
            background-size:100%;
            font-size: 18px;
            font-family:STXingkai;
            color: #59ec0a;
        }
        a{
            text-decoration:none;
        }
        button{
            margin:10px;
        }

        td{
            width:200px;
            height:80px;
        }
    </style>
</head>
<body>
<div id="orderVue">
    <a href="permission.html">返回</a>
    <table id="OrderForm-table">
        <div class="toolbar-div">
            售货订单日期：<input type="datetime-local" id="XHOrderDateMin" name="">~
            取货日期：<input type="datetime-local" id="GDDateMax" name="">
            <button type="button" @click="search" class="btn-warning btn btn-lg">搜索</button>
            <button class="btn-info btn btn-lg" onclick="location.href='addOrderForm.html'">添加需求单</button>
            <button id="delMatterInfo" class="btn btn-danger btn-lg" @click="delOrderFormAll()">批量删除</button>
        </div>
        <tr>
            <th><input id="checkAll" type="checkbox" @click="allCheck"></th>
            <th>售货订单编号</th>
            <th>售货订单日期</th>
            <th>取货日期</th>
            <th>取货地点</th>
            <th>收款方式编号</th>
            <th>收款最迟日期</th>
            <th>货币种类编号</th>
            <th>预付金额</th>
            <th>货物总额</th>
            <th>税率总额</th>
            <th>赊欠金额</th>
            <th>运调费用</th>
            <th>业务员编号</th>
            <th>财务员编号</th>
            <th>收款收据</th>
            <th>客户信息</th>
            <th>货物种类数</th>
            <th>总净高额</th>
            <th>订货数量</th>
            <th>订货单价</th>
            <th>物质明细表</th>
            <th>物质价格表</th>
            <th>物质净高价</th>
            <th>审核结果</th>
            <th>备注</th>
            <th>操作</th>
        </tr>
        <tr v-for="Of in list">
            <td><input class="check" type="checkbox" :value="Of.xhorderNo" @click="isCheckAll"></td>
            <td>{{Of.xhorderNo}}</td>
            <td>{{Of.xhorderDate}}</td>
            <td>{{Of.gddate}}</td>
            <!--            取货地点-->
            <td>
                <input type="text" style="border:none;
                background-color:transparent;color: #0ff;text-align: center" v-model="Of.gdaddress">
            </td>
            <td v-if="Of.revCurrencyModeNo == 1">
                现金
            </td>
            <td v-if="Of.revCurrencyModeNo == 2">
                支付宝
            </td>
            <td v-if="Of.revCurrencyModeNo == 3">
                微信
            </td>
            <td>{{Of.revCurrencyLastDate}}</td>
            <td v-if="Of.currencyNo == 1">
                人民币
            </td>
            <td v-if="Of.currencyNo == 2">
                美元
            </td>
            <td v-if="Of.currencyNo == 3">
                欧元
            </td>
            <td v-if="Of.currencyNo == 4">
                日元
            </td>
            <td v-if="Of.currencyNo == 5">
                韩元
            </td>
            <td v-if="Of.currencyNo == 6">
                港币
            </td>
            <td v-if="Of.currencyNo == 7">
                英镑
            </td>
            <!--            预付金额-->
            <td>
                <input type="text" style="border:none;
                background-color:transparent;color: #0ff;text-align: center" v-model="Of.prePayCurrency">
            </td>
            <td>{{Of.goodsSumCurrency}}</td>
            <td>{{Of.taxSumCurrency}}</td>
            <td>{{Of.creditCurrency}}</td>
            <!--            运调费用-->
            <td>
                <input type="text" style="border:none;
                background-color:transparent;color: #0ff;text-align: center" v-model="Of.addtionalCurrency">
            </td>
            <td>{{Of.traderNo}}</td>
            <td>{{Of.treasurerNo}}</td>

            <td>{{Of.recCurrencyRcept==1?"是":"否"}}</td>
            <td>{{Of.customerNo}}</td>
            <td>{{Of.goodsClassCounts}}</td>
            <!--总净高额-->
            <td>
                <input type="text" style="border:none;
                background-color:transparent;color: #0ff;text-align: center" v-model="Of.sumProfitCurrency">
            </td>
            <!--            订货数量-->
            <td>
                <input type="text" style="border:none;
                background-color:transparent;color: #0ff;text-align: center" v-model="Of.itemsQty">
            </td>
            <td>{{Of.itemsPrice}}</td>
            <td>{{Of.itemsInfoNo}}</td>
            <td>{{Of.itemsNo}}</td>
            <td>{{Of.itemsProfitPrice}}</td>
            <td v-if="Of.isCheck == 1">
                通过审核
            </td>
            <td v-if="Of.isCheck == 2">
                未通过审核
            </td>
            <td v-if="Of.isCheck == 3">
                正在审核中
            </td>
            <td><input type="text" style="border:none;
                background-color:transparent;color: #0ff;text-align: center" v-model="Of.checkRes"></td>
            <td>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"
                        style="width: 70px"
                        @click="openUpd(Of)">修改
                </button>
            </td>

        </tr>
    </table>
    <!--            分页区域-->
    <div class="pagination-div">
        <ul class="pagination" id="page-ul">
            <li class="page-item">
                <a class="page-link" href="javascript:void(0);" @click="cutPage(1)">首页</a>
            </li>
            <li class="page-item" v-if="page.pageNow!=1">
                <a class="page-link" href="javascript:void(0);"
                   @click="cutPage(page.pageNow-1)">{{page.pageNow-1}}</a></li>
            <li class="page-item active">
                <a class="page-link" href="javascript:void(0);">{{page.pageNow}}</a>
            </li>
            <li class="page-item" v-if="page.pageNow!=page.pageTotal">
                <a class="page-link" href="javascript:void(0);"
                   @click="cutPage(page.pageNow+1)">{{page.pageNow+1}}</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="javascript:void(0);"
                   @click="cutPage(page.pageTotal)">尾页</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="javascript:void(0);">共有{{page.count}}条数据</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="javascript:void(0);">共有{{page.pageTotal}}页</a>
            </li>
        </ul>
    </div>
</div>
<!--引入js文件-->
<script type="text/javascript" src="../css/jquery-3.4.1.js"></script>
<script src="../bootstrap/js/bootstrap.js" ></script>
<script src="../vue/vue.js" charset="utf-8"></script>
<script type="text/javascript" src="../css/my.js"></script>
<script>
    let OrderFormTabVue;

    // 查询物质 需要接受一个当前页参数
    function selOrderForm(pageNow, XHOrderDateMin, GDDateMax) {
        let map = [];
        $.ajax({
            type: "post",
            url: "../OrderForm/selOrderForm",
            dataType: "json",
            data: {pageNow: pageNow, pageCount: 5, xHOrderDateMin: XHOrderDateMin, gDDateMax: GDDateMax},
            async: false,
            success: function (data) {
                map = data;
            }
        });
        return map;
    }

    /*创建一个map装查询到的第一页的数据*/
    let map = selOrderForm(1, "", "");
    //加载分页数据
    OrderFormTabVue = new Vue({
        el: '#orderVue',
        data: {
            list: map.list,// 展示表格
            page: map, // 用于分页
        },
        methods: {

            //切换页方法 参数为当前按钮所代表的对应页
            cutPage: function (pageNow) {
                let XHOrderDateMin = $("#XHOrderDateMin").val();
                let GDDateMax = $("#GDDateMax").val();
                //查询要切换页的数据。把结果从新给表格赋值
                OrderFormTabVue.list = selOrderForm(pageNow, XHOrderDateMin, GDDateMax).list;
                //把分页的vue重新赋值。
                OrderFormTabVue.page.pageNow = pageNow;
            },
            //条件查询方法
            search: function () {
                let XHOrderDateMin = $("#XHOrderDateMin").val();
                let GDDateMax = $("#GDDateMax").val();
                // 点击搜索按钮，获取搜索内容，进行查询
                OrderFormTabVue.list = selOrderForm(1, XHOrderDateMin, GDDateMax).list;
                OrderFormTabVue.page = selOrderForm(1, XHOrderDateMin, GDDateMax);
            },
            allCheck: function () {
                eventHub.$emit("allCheck", null);
            },
            isCheckAll: function () {
                eventHub.$emit("isCheckAll", null);
            },
            delOrderFormAll: function () {
                let ids = "";
                // 获取复选框中的值 id值 使用类选择器each()遍历方法
                $(".check").each(function () {
                    // 对所有符合该选择器的元素进行操作。 this 复选框.value
                    // 判断该复选框是否选中
                    if (this.checked) {
                        ids += this.value + ",";

                    }
                })
                // ajax把拼接的id传入到后台
                $.ajax({
                    type: "post",
                    url: "../OrderForm/delOrderForm",
                    data: {ids: ids},
                    dataType: "json",
                    success: function (data) {
                        // 删除完成后重新查询第一页
                        alert(data.message)
                        window.location.reload();
                    }
                });
            },
            //修改客户信息方法
            openUpd: function (Of) {
                $.ajax({
                    type: "post",
                    url: "../OrderForm/updOrderForm",
                    data: Of,
                    dataType: "json",
                    success: function (data) {
                        alert(data.message);
                        window.location.reload();
                    }
                });
            }
        }
    });


</script>
</body>
</html>